<template>
  <div class="main">
    <center>
      <el-button class="addbutton"
                 @click="dialogFormVisible1 = true"
                 type="primary"
                 icon="el-icon-plus">增加</el-button>
      <!-- 增加时候的弹出层 -->
      <el-dialog title="添加角色"
                 :visible.sync="dialogFormVisible1"
                 width="500px"
                 top="200px">
        <el-form :model="formadd">
          <el-form-item label="角色"
                        :label-width="formLabelWidth">
            <el-input v-model="formadd.rolename"
                      auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色中文名"
                        :label-width="formLabelWidth">
            <el-input v-model="formadd.rolename_zh"
                      auto-complete="off"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer"
             class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="addRole()">确 定</el-button>
        </div>
      </el-dialog>

      <el-table v-loading="loading"
                :data="tableData.filter(data => !search || data.rolename.toLowerCase().includes(search.toLowerCase()))"
                style="width: 80%"
                border
                height="600">
        <el-table-column label="序号"
                         width="180"
                         align="center">
          <template slot-scope="scope">
            <span v-text="getIndex(scope.$index)"></span>
          </template>

        </el-table-column>
        <el-table-column label="角色名"
                         prop="rolename">
        </el-table-column>
        <el-table-column label="角色名中文"
                         prop="rolename_zh">
        </el-table-column>
        <el-table-column label="修改时间"
                         prop="alter_time"
                         :formatter="dataFormat">
        </el-table-column>
        <el-table-column label="修改人"
                         prop="alter_people">
        </el-table-column>
        <el-table-column align="right">
          <template slot="header"
                    slot-scope="scope">
            <el-input v-model="search"
                      size="mini"
                      placeholder="输入角色名搜索" />
          </template>
          <template slot-scope="scope">
            <el-button size="mini"
                       @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
            <el-button size="mini"
                       type="danger"
                       @click="handleDelete(scope.$index, scope.row)">删除</el-button>

            <!-- 编辑时候的弹出层 -->
            <el-dialog title="角色修改"
                       :visible.sync="dialogFormVisible"
                       width="35%"
                       top="200px">
              <el-form :model="form">
                <el-form-item label="序号"
                              :label-width="formLabelWidth">
                  <el-input v-model="form.id"
                            auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色名"
                              :label-width="formLabelWidth">
                  <el-input v-model="form.rolename"
                            auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色名中文"
                              :label-width="formLabelWidth">
                  <el-input v-model="form.rolename_zh"
                            auto-complete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer"
                   class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary"
                           @click="handleSet(scope.$index, scope.row)">确 定</el-button>
              </div>
            </el-dialog>

          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="pageNumber"
                     :page-sizes="[10, 20, 30, 40]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="this.totalRow">
      </el-pagination>
    </center>
  </div>

</template>


<script>
import { getAllrole } from '@/api/role'
import { addRole } from '@/api/role'
import { editRole } from '@/api/role'
import { deleteRole } from '@/api/role'
import moment from 'moment'
export default {
  data () {
    return {
      tableData: [],
      search: '',
      pageNumber: 1,//当前页
      pageSize: 10,//每页大小
      totalRow: 0,//总条数
      totalPage: 0,//总页数
      input: '',
      loading: true,


      dialogFormVisible: false,//编辑弹出层默认为关闭
      form: {
        rolename: "",
        rolename_zh: "",
        id: ""
      },
      formLabelWidth: '100px',

      //增加时候的弹出层
      dialogFormVisible1: false,//编辑弹出层默认为关闭
      formadd: {
        rolename: "",
        rolename_zh: "",
        id: ""
      },
    }
  },
  methods: {
    //增加
    addRole () {
      var params = {
        rolename: this.formadd.rolename,
        rolename_zh: this.formadd.rolename_zh,
      }
      addRole("/role/addRole", params).then(
        res => {
          if (res.code === 200) {
            this.$message("保存成功！")
            location.reload()
          } else {
            this.$message(res.data)
          }
        }
      )
    },
    //时间格式化
    dataFormat (row, column) {
      var date = row[column.property];
      if (date == undefined) { return '' };
      return moment(date).format("YYYY-MM-DD HH:mm:ss")
    },
    //删除
    handleDelete (index, row) {
      // console.log(index, row);
      // console.log("删除的信息为" + index + row)
      deleteRole('/role/deleteRole', row).then(
        res => {
          if (res.code === 200) {
            this.$message("删除成功！")
            location.reload()
          }
          else {
            this.$message(res.data)
          }
        }
      );
    },
    //编辑
    handleEdit (index, row) {
      this.dialogFormVisible = true //开启弹出层
      this.form.rolename = row.rolename
      this.form.rolename_zh = row.rolename_zh
      this.form.id = row.id
    },
    handleSet (index, row) {
      var params = {
        rolename: this.form.rolename,
        rolename_zh: this.form.rolename_zh,
        id: this.form.id
      }
      editRole('/role/editRole', params).then(
        res => {
          if (res.code === 200) {
            this.$message("修改成功！")
            this.loading = false
            this.dialogFormVisible = false
            location.reload()
          }
          else {
            this.$message(res.data)
          }
        }
      )
    },
    //分页点击方法
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val
      var params = {
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      }
      this.findAll(params)
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`);
      this.pageNumber = val
      var params = {
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      }
      this.findAll(params)
    },
    findAll (params) {
      getAllrole('/role/getAllrole', params).then(
        res => {
          if (res.code === 200) {
            this.tableData = res.data.list
            this.totalRow = res.data.totalRow
            this.loading = false
          } else if (res.code === 500) {
            this.$message(res.data)
          }
        }
      )

    },
    //添加表格序号
    getIndex ($index) {
      return (this.pageNumber - 1) * this.pageSize + $index + 1
    }
  },
  //初始化的时候初始化表格大小
  created () {
    var params = {
      pageNumber: this.pageNumber,
      pageSize: this.pageSize
    }
    this.findAll(params)
  }

}
</script>

<style scoped>
.main {
  width: 100%;
  height: 700px;
  margin-top: 10px;
  /* border: 1px solid red; */
}
.search {
  /* float: left; */
  margin-left: 145px;
}
.searchinput {
  float: right;
  width: 60%;
}
.elrow {
  margin-top: 10px;
}
.addbutton {
  margin-left: -1060px;
}

.el-dialog__title {
  float: left !important;
}
</style>